<!DOCTYPE html>
<html style="width: 100%">
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

  <style>
    table{
      border-top: #0096dc;
      border-radius: 10px;
      width: 1200px;
      margin: 0 auto;
    }
    tr{
      border-bottom: 1px solid #f1d8b6;
    }
    td{
      padding: 20px;
      border: 1px solid #f1d8b6;
      color: #a56437;
      font-weight: bold;
      font-size: 16px;
    }
    #d1{
      padding: 0;
      margin: 0 auto;
      width: 100%;
      height: 500px;
      background-image:url("img/mrg.jpg");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    span{
      font-size: 20px;
      color:#8b8c81;
    }
    #card_img{
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
    }
    p{
      text-align: left;
    }


    .el-menu-item_top{
      position:relative;
      left: 170px;
    }
    b:hover{
      color: orange;
    }
    a{
      text-decoration: none;
    }
    a:link{color: black}
    a:visited{color: black}
    a:hover{color: orange}
    a:active{color: orange}
    .el-menu--horizontal>.el-menu-item {
      border-bottom: none;
    }
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
    .el-menu--horizontal>.el-menu-item.is-active {
      border-bottom: none;
    }
    .el-icon-arrow-down:before {
      content: none;
    }
  </style>
</head>
<body style="width: 100%">
<div id="app" style="width: 100%">
  <el-menu style="width: 1200px;margin: 0 auto"
           mode="horizontal"
           @select="handleSelect"
           text-color="black"
           active-text-color="black">
    <a href=""><img src="logo.png" style="float: left;position: relative;width: 80px; height: 77px"></a>
    <el-menu-item index="1" class="el-menu-item_top"><b><a href="/index.html">首页</a> </b></el-menu-item>
    <el-menu-item class="el-menu-item_top">
      <el-submenu index="2" style="position:relative;top:3px;right: 5px">
        <template slot="title"><b>在售品种</b></template>
        <el-menu-item index="2-1"><a href="/searchcat.html">在售猫咪</a></el-menu-item>
        <el-menu-item index="2-2"><a href="/searchdog.html">在售狗狗</a></el-menu-item>
      </el-submenu>
    </el-menu-item>
    <el-menu-item class="el-menu-item_top">
      <el-submenu index="3" style="position:relative;top:3px;right: 5px">
        <template slot="title"><b>宠物词典</b></template>
        <el-menu-item index="3-1"><a href="/catDictionary.html">猫咪的饲养方式</a></el-menu-item>
        <el-menu-item index="3-2"><a href="/dogDictionary.html">狗狗的饲养方式</a></el-menu-item>
      </el-submenu>
    </el-menu-item>
    <el-menu-item class="el-menu-item_top">
      <el-submenu index="4" style="position:relative;top:3px;right: 5px">
        <template slot="title"><b>服务项目</b></template>
        <el-menu-item index="4-1"><a href="/宠物美容.html">宠物美容</a></el-menu-item>
        <el-menu-item index="4-2"><a href="/宠物酒店.html">宠物酒店</a></el-menu-item>
        <el-menu-item index="4-3"><a href="/catcafe.html">猫咖啡馆</a></el-menu-item>
        <el-menu-item index="4-4"><a href="/dogpark.html">狗狗公园</a></el-menu-item>
      </el-submenu>
    </el-menu-item>
    <el-menu-item index="5" class="el-menu-item_top"><a href="/lianxi.html"><b>联系我们</b></a></el-menu-item>
    <el-menu-item index="6" style="float: right;position: relative"><i class="el-icon-user" style="font-size: 30px"></i></el-menu-item>
    <div style="float: right;position: relative;top: 10px">
      <el-input type="text">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
  </el-menu>
  <div id="d1"></div>

  <h1 style="text-align: center;font-size:45px;margin-top: 60px">宠物酒店</h1>
  <table>
    <caption style="font-size: 30px;text-align: left">宠物酒店价格一览<span>Pet hotel price list</span></caption>
    <tr style="background-color:#87cab6;color: white">
      <th>宠物尺寸</th><th>1小时</th><th>当日返回</th><th>住宿</th>
    </tr>

    <tr>
      <td>小型犬</td>
      <td>￥24</td>
      <td>￥90</td>
      <td>￥180</td>
    </tr>

    <tr style="background-color: #e6f8f4">
      <td>中型犬</td>
      <td>￥35</td>
      <td>￥120</td>
      <td>￥220</td>
    </tr>

    <tr>
      <td>大型犬</td>
      <td>￥45</td>
      <td>￥150</td>
      <td>￥260</td>
    </tr>
  </table>
  <hr style="border: 1px solid rgba(139,137,140,0.38)">

  <div style="margin-left: 350px;margin-top: 50px">
    <h1>特征<span>Feature</span></h1>
    <p>空陆宠物店有爱宠寄存服务，您外出旅游或购物时，可以让爱宠入住于空陆的宠物酒店。</p>
    <p>爱宠在空陆宠物酒店住宿时，我们的工作人员会每日带着您的爱犬散步15分钟，或者让您的爱宠在空陆的狗狗公园内运动。住宿期间，我们会给您的提供我们公司<br>
      的狗粮。如果您担心爱宠吃不习惯，也可以带上您家里的狗粮，我们会按照您的要求给爱宠喂食。</p>
    <p>并且在您来接爱宠回家时，我们会给您提供入住期间爱宠的健康状况记录。</p>
  </div>
  <hr style="border: 1px solid rgba(139,137,140,0.38)">

  <div id="card_img">
    <el-row gutter="20">
      <el-col span="4.8" v-for="item in imgUrl">
        <el-card >
          <img :src="item.url" style="width: 400px;height: 370px">
          <p style="text-align: center">{{item.info}}</p>
        </el-card>
      </el-col>
    </el-row>
  </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        imgUrl:[{url:"img/mrga.jpg",info:"啦啦宝都上海金桥店内"},
                {url:"img/mrgb.jpg",info:"猫咖啡馆"},
                {url:"img/mrgc.jpg",info:"狗狗公园"}]
      }
    },
   methods:{
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
     }
   }
  })
</script>
</html>